<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>

<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">

var chartdata;
var xdata=["EMR","FAX","eBO"];


$(function () {
	
	 $.getJSON('../GetDataForChart', function(data) {
		 var i=0;
		 chartdata = data.chartdata;
		 alert("Data: " + chartdata);
		 for(i=0;i<data.chartdata.length; i++){
			 xdata[i]=data.chartdata[i];
			 alert(xdata[i]);
		 }
		
});
	 
	 
	 var mydata = [{
         type: 'column',
         name: 'Issue v/s Module Distribution',
         data: [
             ["EMR",   60],
             ["FAX",   20],
             ['eClinicalMessenger',20],
             ['P2P',    20.0],
             ['Opera',     4.0],
             ['Others',   6.0]
         ]
	 //data: chartdata
     }];
	 
		 
	
	
	 
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Issue v/s Module Distribution'
            },
            tooltip: {
        	    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            	percentageDecimals: 1
            },
            
            series: mydata,
            legend: {
                layout: 'vertical',
                align:'right',
                verticalAlign:'middle',
                x:0,
                title:'Care Setting'
                },
             xAxis: {

                    categories: xdata
                    }
        });
    });
    

		</script>
</head>
<body>
	<script src="../highchart/js/highcharts.js"></script>
	<script src="../highchart/js/modules/exporting.js"></script>

	<div id="container"
		style="min-width: 400px; height: 400px; margin: 0 auto"></div>

</body>
</html>

